<template>
    <el-dialog :model-value="props.visible" title="财务审核" width="49%" @close="handleClose">
        <template #header>
            <div class="header">
                <h3 class="title">财务审核</h3>
                <el-icon class="tips-icon">
                    <QuestionFilled />
                </el-icon>
                <span class="tips">微信转账的情况下付款人=LOGO名称，预付款抵扣上传的图片是预付款的流水明细单截图，付款日期，付款金额必须完全属实方可通过审核，否则不作为通过资格。</span>
            </div>
        </template>
        <div class="financeExamine">
            <el-descriptions :column="3">
                <el-descriptions-item label="客户名称：">{{ props.customers.filter((item:any)=>item.id == props.orderDetails.customerId)[0]?.customerName }}</el-descriptions-item>
                <el-descriptions-item label="订单总价：">{{ `${examineInfo.needMoney || 0} 元` }}</el-descriptions-item>
                <el-descriptions-item label="合计总价：">{{ `${examineInfo.receivedMoney || 0} 元` }}</el-descriptions-item>
            </el-descriptions>
            <salerExamineRecord v-for="(item, index) in examineInfo.dataList" :key="item.id" ref="examineRecordRefs" :examineDetail="item" :index="index" :pay_type="pay_type" :shopNames="item.paymentMethod == '1'?online_payment_type:offline_payment_type"  />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { getSalerExamineByIdApi, fianceExamineApi} from '@/api/sj/productManagement/customizedOrder/index';
import salerExamineRecord from './salerExamineRecord.vue';
import FinanceExamine from '@/views/guide/contract/components/financeExamine.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { online_payment_type, offline_payment_type } = toRefs<any>(proxy?.useDict('online_payment_type', 'offline_payment_type'));
const examineInfo = ref<any>([]);
const props = defineProps<{
    visible: boolean,
    orderDetails: any,
    customers: any[],
    pay_type: any[]
}>();
const emits = defineEmits(['close', 'submit']);
const examineRecordRefs = ref<(InstanceType<typeof salerExamineRecord>)[]>([]);

/** 获取销售审核信息 */
watch(()=>[props.visible, props.orderDetails], async ([newVisible, newData])=>{
    if(newVisible && newData){
        const { code, data } = await getSalerExamineByIdApi(newData.id);
        if(code == 200){
            examineInfo.value = data
        }
    }
});

const getSubmitData = () => {
    const data = [];
    for(let examineRecordRef of examineRecordRefs.value){
        data.push(examineRecordRef.emitSubmitData());
    };
    return data;
};

const handleSubmit = async () => {
    let allValided = true;
    for(let examineRecordRef of examineRecordRefs.value){
        const isValid = await examineRecordRef.validateForm();
        if(!isValid){
            allValided = false;
            break;
        };
    };
    if(allValided){
        const submitData = getSubmitData();
        const { code } = await fianceExamineApi(submitData);
        if(code == 200){
            emits('submit', true);
            handleClose();
        }else{
            emits('submit', false);
        }
    }else{
        console.log('校验失败');
    };
};

const handleClose = () => {
    for(let examineRecordRef of examineRecordRefs.value){
        examineRecordRef.handleExamineClose();
    };
    emits('close');
};
</script>

<style lang="scss" scoped>
.header{
    display: flex;
    align-items: center;
    .title{
        width: 100px;
    }
    .el-icon{
        margin-left:10px;
    };
    .tips-icon:hover + .tips{
        visibility: visible;
    }
    .tips{
        color: red;
        font-size: 15px;
        margin-left: 15px;
        visibility: hidden;
    }
}
.contract-info{
    font-weight: bolder;
}

::v-deep(.el-input__wrapper){
    width:100%
}
.financeExamine{
    padding: 0 20px !important;
}
</style>